<template>
  <div class="g-page-container">
    <PageHeader title="销售预测提交延误次数" />
    <div class="g-content-container">
      <SearchForm
        ref="form"
        @search="getList"
        @down-table-list="downTableList"
      />
      <p-table
        class="table-list-container"
        :data-source="formatList"
        row-key="id"
        :pagination="false"
        :columns="columns"
        :loading="load"
        bordered
      />
    </div>
  </div>
</template>

<script>
import SearchForm from './components/SearchForm.vue';
import {
  getSaleForecastDelaysList,
  postExportList,
} from '@/api/saleForecastDelays.js';
import { downloadFile } from '@/utils/index.js';

let idKey = 0;
export default {
  components: {
    SearchForm,
  },
  data() {
    return {
      dataSource: [],
      load: false,
    };
  },
  computed: {
    formatList() {
      if (this.dataSource.length === 0) {
        return;
      }
      const list = Object.keys(this.groups).map((group) => {
        const data = this.groups[group] || [];
        // const total = data.reduce((pre, cur) => {
        //   pre = pre + cur.count;
        //   return pre;
        // }, 0);
        // data.forEach((item) => {
        //   item.total = total;
        // });
        return [...data];
      });
      return [...list.flat(Infinity)];
    },
    groups() {
      return this.dataSource.reduce((pre, cur) => {
        if (pre[cur.salesGroup]) {
          pre[cur.salesGroup].push({ ...cur, id: ++idKey });
        } else {
          pre[cur.salesGroup] = [{ ...cur, id: ++idKey }];
        }
        return pre;
      }, {});
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '销售组织',
          dataIndex: 'salesOrganization',
          ellipsis: true,
          customRender: (value, row, index) => {
            return this.customRenderOrg(value, index, row, 'salesOrganization');
          },
        },
        {
          align: 'center',
          title: '销售组',
          dataIndex: 'salesGroupName',
          ellipsis: true,
          customRender: (value, row, index) => {
            return this.customRender(value, index, row, 'salesGroup');
          },
        },
        {
          align: 'center',
          title: '延误次数',
          dataIndex: 'count',
          ellipsis: true,
          customRender: (value, row, index) => {
            return this.customRender(value, index, row, 'count');
          },
        },
        {
          align: 'center',
          title: '编号',
          dataIndex: 'serialNumber',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '名称',
          dataIndex: 'name',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '销售责任人',
          dataIndex: 'salesResponsible',
          ellipsis: true,
        },
      ];
      return columns;
    },
    orgOptions() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
      });
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    async downTableList() {
      const form = this.$refs.form.form;
      if (form.salesGroup === '') {
        form.salesGroup = undefined;
      }
      if (form.salesOrganization === '') {
        form.salesOrganization = undefined;
      }
      const result = await postExportList(form);
      await downloadFile(result.data, '销售预测提交延误列表.xlsx');
    },
    async getList() {
      const form = this.$refs.form.form;
      if (form.salesGroup === '') {
        form.salesGroup = undefined;
      }
      if (form.salesOrganization === '') {
        form.salesOrganization = undefined;
      }
      this.load = true;
      const result = await getSaleForecastDelaysList(form).finally(() => {
        this.load = false;
      });
      this.dataSource = result?.data?.data || [];
    },
    customRenderOrg(children, index, row, key) {
      children = this.orgOptions[children];
      const attrs = {};
      if (
        key === 'salesGroup' ||
        key === 'salesOrganization' ||
        key === 'count'
      ) {
        const data = this.groups[row.salesGroup] || [];
        if (row.id === data[0]?.id) {
          attrs.rowSpan = data.length;
        } else {
          attrs.rowSpan = 0;
        }
      }
      return {
        children,
        attrs,
      };
    },
    customRender(children, index, row, key) {
      const attrs = {};
      if (
        key === 'salesGroup' ||
        key === 'salesOrganization' ||
        key === 'count'
      ) {
        const data = this.groups[row.salesGroup] || [];
        if (row.id === data[0]?.id) {
          attrs.rowSpan = data.length;
        } else {
          attrs.rowSpan = 0;
        }
      }
      return {
        children,
        attrs,
      };
    },
  },
};
</script>
<style lang="less" scoped>
.table-list-container {
  margin-top: 20px;
}
</style>

